<template>
  <div class="app-container">
    <el-form :model="queryForm" ref="queryForm" inline v-show="showSearch">
      <el-form-item label="巡检人" prop="userId">
        <user-select v-model="queryForm.userId" placeholder="请选择巡检人"/>
      </el-form-item>
      <el-form-item label="时间" prop="timeRange">
        <el-date-picker v-model="queryForm.timeRange"
                        type="datetimerange"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :disabled-date="disabledDateFunction"/>
      </el-form-item>
      <el-form-item label="状态" prop="delFlag" v-if="hasPhysicalRemovePermission">
        <el-select v-model="queryForm.delFlag" clearable placeholder="请选择状态">
          <el-option v-for="flag in delFlagMap" :value="flag.value" :label="flag.label"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getSafeInspectionList">搜索</el-button>
        <el-button icon="Refresh" @click="resetQueryForm">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-tools mb8">
      <div>
        <el-button type="danger"
                   icon="Delete"
                   plain
                   :disabled="deleteBtnDisabled"
                   @click="handleDeleteSafeInspectionList"
                   v-hasPermi="['core:safe-inspection:remove']">删除</el-button>
        <el-button type="danger"
                   icon="Delete"
                   plain
                   :disabled="physicalDeleteBtnDisabled"
                   @click="handlePhysicalDeleteSafeInspectionList"
                   v-hasPermi="['core:safe-inspection:physical-remove']">物理删除</el-button>
      </div>
      <div>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getSafeInspectionList"/>
      </div>
    </div>

    <el-table :data="recordList"
              ref="recordList"
              v-loading="recordLoading"
              @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection"/>
      <el-table-column align="center" type="index" label="序号" width="80"/>
      <el-table-column align="center" prop="user.userName" label="工号"/>
      <el-table-column align="center" prop="user.nickName" label="姓名"/>
      <el-table-column align="center" prop="user.dept.deptName" label="部门"/>
      <el-table-column align="center" prop="createTime" label="巡检时间"/>
      <el-table-column align="center" prop="url" label="内容" width="240">
        <template #default="{row}">
          <image-preview :src="row.url" :preview-src-list="[row.url]" v-if="['png','jpg','jpeg'].includes(row.url.split('.')[1]) "/>
          <el-button type="success" icon="VideoPlay" plain v-else  @click="viewRecordFile(row)">点击查看</el-button>
<!--          <span  class="box_margin">

                                <video v-if="['3gp','rmvb','avi','mp4' ].includes(row.url.split('.')[1])" width="100" height="100" :src="row.url"  controls autoplay>
                                    <source :src="row.url" type="video/mp4">
                                    您的浏览器不支持Video标签。
                                </video>
          </span>-->
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="160">
        <template #default="{row}">
          <el-button v-if="row.delFlag === delFlag.NORMAL.value"
                     type="primary"
                     link
                     icon="Delete"
                     v-hasPermi="['core:safe-inspection:remove']"
                     @click="handleDeleteSafeInspection(row)">删除</el-button>
          <el-button v-if="hasPhysicalRemovePermission"
                     type="primary"
                     link
                     icon="Delete"
                     v-hasPermi="['core:safe-inspection:physical-remove']"
                     @click="handlePhysicalDeleteSafeInspection(row)">物理删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination :total="recordTotal"
                v-model:page="queryForm.pageNum"
                v-model:limit="queryForm.pageSize"
                @pagination="getSafeInspectionList"/>
    <el-dialog title="录像文件"
               v-model="recordDialogVisible"
               width="940px"
               height="835px"
               :show-close="false"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :destroy-on-close="true">

      <video id="recordVideo" :src="url" width="900" height="500"  controls autoplay></video>
      <span slot="footer" class="dialog-footer">
          <el-button @click="closeRecordVideo" >关 闭</el-button>
          </span>
    </el-dialog>
  </div>
<!--  <image-preview :src="row.url" :preview-src-list="[row.url]"/>-->
</template>

<script>
import {deleteSafeInspection, getSafeInspectionList, physicalDeleteSafeInspection} from "@/api/core/safeInspection"
import {checkPermi} from "@/utils/permission"
import {delFlag, delFlagMap} from "@/constant/DelFlag";
import dayjs from "dayjs";

export default {
  name: "index",
  data() {
    return {
      queryForm: {
        userId: '',
        timeRange: [],
        pageNum: 1,
        pageSize: 10
      },recordDialogVisible:false,
      currentIndex:0,
      showSearch: true,
      recordLoading: false,
      recordList: [],
      recordTotal: 0,
      url:'',
      deleteBtnDisabled: true,
      physicalDeleteBtnDisabled: true,
      hasPhysicalRemovePermission: false,
      delFlagMap,
      delFlag,

    }
  },
  computed: {
    /*imageList() {
      return this.recordList.map(item => item.url)
    }*/
  },
  created() {
    this.hasPhysicalRemovePermission = checkPermi(['core:safe-inspection:physical-remove'])
    if (this.hasPhysicalRemovePermission) {
      this.queryForm.delFlag = this.delFlag.NORMAL.value
    }

    this.getSafeInspectionList()
  },
  methods: {
    resetQueryForm() {
      this.queryForm = {
        rtcUserId: '',
        timeRange: [],
        pageNum: 1,
        pageSize: 10
      }
      if (this.hasPhysicalRemovePermission) {
        this.queryForm.delFlag = this.delFlag.NORMAL.value
      }
      this.getSafeInspectionList()
    },
    getSafeInspectionList() {
      this.recordLoading = true

      const form = {...this.queryForm}
      if (form.timeRange && form.timeRange.length === 2) {
        form.startTime = form.timeRange[0]
        form.endTime = form.timeRange[1]
      }
      delete form.timeRange

      getSafeInspectionList(form).then(res => {
        console.log(res,'1111')
        const {rows, total} = res
        this.recordList = rows
        this.recordTotal = total
      }).finally(() => {
        this.recordLoading = false
      })
    },
    deleteSafeInspection(ids) {
      deleteSafeInspection(ids).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.getSafeInspectionList()
      })
    },
    async handleDeleteSafeInspection(row) {
      await this.$modal.confirm('您确定要删除此条数据吗？')

      const ids = [row.id]
      this.deleteSafeInspection(ids)
    },
    async handleDeleteSafeInspectionList() {
      await this.$modal.confirm('您确定要删除勾选的数据吗？')

      const rows = this.$refs.recordList.getSelectionRows()
      const ids = rows.map(item => item.id)
      this.deleteSafeInspection(ids)
    },
    handleSelectionChange(selection) {
      this.deleteBtnDisabled = !selection.filter(item => item.delFlag === this.delFlag.NORMAL.value).length
      this.physicalDeleteBtnDisabled = !selection.length
    },
    physicalDeleteSafeInspection(ids) {
      physicalDeleteSafeInspection(ids).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.getSafeInspectionList()
      })
    },
    async handlePhysicalDeleteSafeInspection(row) {
      await this.$modal.confirm('您确定要物理删除此条数据吗？删除之后不可恢复！')

      const ids = [row.id]
      this.physicalDeleteSafeInspection(ids)
    },
    async handlePhysicalDeleteSafeInspectionList() {
      await this.$modal.confirm('您确定要物理删除勾选的数据吗？删除之后不可恢复！')

      const rows = this.$refs.recordList.getSelectionRows()
      const ids = rows.map(item => item.id)
      this.physicalDeleteSafeInspection(ids)
    },
    disabledDateFunction(date) {
      const paramDate = dayjs(date)
      const currentDate = dayjs()

      currentDate.hour(23)
      currentDate.minute(59)
      currentDate.second(59)

      return paramDate.valueOf() > currentDate
    },
    viewRecordFile(row) {
      this.currentIndex = 0
      this.url = `${import.meta.env.VITE_APP_BASE_API}${row.url}`
      console.log(this.url);
      this.recordDialogVisible = true
    },
    closeRecordVideo() {
      const videoDom = document.querySelector('#recordVideo')
      videoDom.pause()
      this.url = ''
      this.currentIndex = 0
      this.recordDialogVisible = false
    },

  }
}
</script>

<style lang="scss" scoped>
.dialog-footer{
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
</style>
